<template>
	<view>
		<view style="margin: 20rpx; border-radius: 10rpx;">



			<view style="margin: 20rpx 0rpx 0rpx 0rpx; padding: 20rpx; display: flex; background-color: white">

				<view>
					<image :src="img" style="height: 160rpx; width: 160rpx; border-radius: 20rpx"></image>
				</view>

				<view>
					<!-- //内容 -->
					<view style="font-size: 25rpx; margin: 0rpx 50rpx 20rpx 20rpx">
						女生冬款羽绒服鸭毛羽绒服女中长款2021新款韩版宽松百搭外套
					</view>
					<view
						style="background-color: #f1f1f1; height: 20rpx;font-size: 25rpx;text-align: center;line-height: 20rpx; width: 100rpx;padding: 10rpx;border-radius: 10rpx;margin-left: 20rpx;">
						245g</view>
					<!-- 价格 -->
					<view style="display: flex;margin-top: 10rpx;">
						<view style="
                font-size: 25rpx;
                color: red;
                margin: 0rpx 0rpx 20rpx 20rpx;
				font-size: 30rpx;font-weight: bold;
              ">
							￥162.955
						</view>
						<!-- 数量 -->
						<view style="display: flex;margin-left: 100rpx;">
							<button class="btns">-</button>
							<input style="width: 80rpx; height: 40rpx; text-align: center;" value="1" disabled=""></input>
							<button class="btns">+</button>

						</view>
					</view>


				</view>
				<view style="margin-left: -30rpx;">
					<u-checkbox-group v-model="checkboxValue1" placement="column" @change="checkboxChange">
						<u-checkbox :customStyle="{ marginBottom: '8px' }">
						</u-checkbox>
					</u-checkbox-group>
				</view>

			</view>








		</view>
		<!-- 底部操作栏 -->
		<view class="czl">
			<!-- 全选 -->
			<view style="margin-top: 30rpx; margin-left: 10rpx">
				<u-checkbox-group v-model="checkboxValue1" placement="column" @change="checkboxChange">
					<u-checkbox :customStyle="{ marginBottom: '8px' }" :label="checkbox1.name" :name="checkbox1.name">
					</u-checkbox>
				</u-checkbox-group>
			</view>
			<!-- 合计 -->
			<view class="heji">
				<view>
					<view>合计：￥2320.00</view>
					<view style="color: red">优惠减：¥23230.00</view>
				</view>
			</view>
			<!-- 清空 -->
			<view class="qko"> 清空 </view>
			<!-- 结算 -->
			<view class="qko" style="background-color: red"> 结算(0) </view>
		</view>
	</view>
</template>

<script>
	import {
		image
	} from '@uni/apis';

	export default {
		data() {
			return {
				img: "https://pic.rmb.bdstatic.com/bjh/events/0e5b8739e39fdb0d4fe37d16ed6485754120.png",

				cheboxss: {
					disabled: false,
				},
				checkboxValue1: [],
				// 基本案列数据
				checkbox1: {
					name: "全选",
					disabled: false,
				},
			};
		},
	};
</script>

<style lang="less">
	// * {
	//   margin: 0;
	//   padding: 0;
	// }
	.btns {
		width: 80rpx;
		height: 40rpx;
		line-height: 40rpx;
		text-align: center;
	}

	.qko {
		background-color: green;
		color: white;
		font-size: 30rpx;
		height: 60rpx;
		margin: 20rpx;
		border-radius: 50rpx;
		text-align: center;
		width: 150rpx;
		line-height: 60rpx;
	}

	.heji {
		flex: 1;
		text-align: center;
		font-size: 30rpx;
		font-size: 25rpx;
		line-height: 50rpx;
	}

	.czl {
		position: fixed;
		bottom: 0rpx;
		height: 100rpx;
		width: 100%;
		background-color: white;
		display: flex;
	}

	page {
		background-color: #f1f1f1;
	}
</style>